<template>
  <div :style="bg_style" class="hello">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: left">
        <span >选出比较符合你的一项</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="xiayiti">{{index === 43 ? '提交' : '下一个'}}</el-button>
      </div>
      <div>{{mydata.neirong}}</div>
  
      <el-radio-group style="text-align: left" v-model="radio" @change="changehandle">
        <div v-for="(o,i) in mydata.xuanxiang" :key="i" >
        <el-radio  class="text item" v-model="radio" :label="i">{{o}}</el-radio>
        </div>
      </el-radio-group>
  
    </el-card>
  
    <!-- tanchuang -->
    <div>
      <!-- @closed="handleClose" -->
      <el-dialog title="提示" :visible.sync="dialogFormVisible_style_tishi"  >
          
          <div>
            {{
              '恭喜你完成了测试，您的学习风格为:'+style
            
            }}
          </div>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible_style_tishi = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible_style_tishi = false">确 定</el-button>
          </div>
      </el-dialog>
    </div>
  </div>
  </template>
  
  <script>
    // import Mock from './api/style.js';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        bg_style:{
            backgroundImage: 'url('+require('../assets/bizhi11.jpg')+')',
            backgroundRepeat: 'no-repeat',
            backgroundSize:'100% 100%',
          },
        dialogFormVisible_style_tishi:false,
  
        ans: [],
        radio: -1,
        mydata: {
          neirong: '以下何种方法比较能够使我理解一件事物',
          xuanxiang: [
            '实际操作',
            '思考'
          ]
        },
        answer:[],
        style: [],
  
        timus: [
          {
            neirong: '以下何种方法比较能够使我理解一件事物',
            xuanxiang: [
              '实际操作',
              '思考'
            ]
          },
          {
            neirong: '我比较希望别人认为我是',
            xuanxiang: [
              '实际的',
              '创新的'
            ]
          },
          {
            neirong: '当我想到昨天做过的事情，我最有可能',
            xuanxiang: [
              '想起一幅完整的画面',
              '用语言或文字来表述'
            ]
          },
          {
            neirong: '我倾向于',
            xuanxiang: [
              '理解事物的某些细节，但对于整体结构却不十分清楚',
              '理解事物的整体结构，但对具体细节却不十分清楚'
            ]
          },
          {
            neirong: '何种方法比较能够帮助我学习一件新的事物',
            xuanxiang: [
              '谈论',
              '思考'
            ]
          },
          {
            neirong: '假若我是老师，我会比较倾向讲授何种课程',
            xuanxiang: [
              '有关事实及实际生活的课程',
              '有关观念及理论的课程'
            ]
          },
          {
            neirong: '我比较偏好藉由下列何种形式获得新的信息',
            xuanxiang: [
              '相片、图表、示意图或者地图',
              '书面指示或语言讯息'
            ]
          },
          {
            neirong: '一旦我理解了',
            xuanxiang: [
              '各个部分，我就能够理解一件事情的整体',
              '整体事物，我就会理解各个局部的关连特性'
            ]
          },
          {
            neirong: '在小组学习中，面对一个比较困难的问题时，我比较有可能',
            xuanxiang: [
              '积极投入其中并提出自己的想法',
              '坐在旁边听其他小组成员的意见'
            ]
          },
          {
            neirong: '我认为下列何者较容易学习',
            xuanxiang: [
              '事实性的内容',
              '概念性的内容'
            ]
          },
          {
            neirong: '在有很多图表的书中，我可能会',
            xuanxiang: [
              '把所有图表仔细的看过',
              '更专注于其中的文字说明'
            ]
          },
          {
            neirong: '当我在求解数学问题时',
            xuanxiang: [
              '我通常会一步步的解题，直到最后得到答案',
              '我通常会先想到答案，之后才努力想办法找出解题的步骤'
            ]
          },
          {
            neirong: '在我修的课堂中，我通常',
            xuanxiang: [
              '会去认识大部分同学',
              '不太认识其他同学'
            ]
          },
          {
            neirong: '当我在阅读「非小说」的读物时，我偏好的是',
            xuanxiang: [
              '能告诉我事实和如何实际操作的读物',
              '能提供我新的想法去思考的读物'
            ]
          },
          {
            neirong: '我喜欢的老师是',
            xuanxiang: [
              '会利用很多图表讲课的老师',
              '会花很多时间在解说上的老师'
            ]
          },
          {
            neirong: '当我分析一个故事或小说时',
            xuanxiang: [
              '我会先想到书中的各个情节，之后再试着整理出整个故事的主题',
              '在读完之后，我就知道故事的主题，然后再倒回去找出体现主题的情节'
            ]
          },
          {
            neirong: '当我面对作业中的问题时，我通常会',
            xuanxiang: [
              '立刻开始尝试去解答',
              '先尝试完全理解问题'
            ]
          },
          {
            neirong: '我比较喜欢的想法是',
            xuanxiang: [
              '确定性的',
              '理论性的'
            ]
          },
          {
            neirong: '我最能够记住的是',
            xuanxiang: [
              '我看到过的',
              '我听到过的'
            ]
          },
          {
            neirong: '对我来说比较重要的是，教师能',
            xuanxiang: [
              '以一连串清楚的步骤呈现课程材料',
              '能给我总体性的概念并与其他主题相关联'
            ]
          },
          {
            neirong: '我比较喜欢这样的读书方式',
            xuanxiang: [
              '在一个学习小组中',
              '独自一人'
            ]
          },
          {
            neirong: '我比较有可能被认为是',
            xuanxiang: [
              '对于工作细节很仔细关注',
              '对于如何工作具有创造力'
            ]
          },
          {
            neirong: '当我到了一个陌生的地方时，会希望拿到的指南是',
            xuanxiang: [
              '一本地图',
              '一本说明书'
            ]
          },
          {
            neirong: '   ',
            xuanxiang: [
              '我总是以非常规律的步调学习，经过努力学习之后，最后一定能学会 ',
              '我总是断断续续的学习，学习过程中我会有疑惑，但最后我可以顿悟到 学习的内容'
            ]
          },
          {
            neirong: '我做事情较喜欢',
            xuanxiang: [
              '直接尝试付诸行动',
              '先仔细思考该怎么做'
            ]
          },
          {
            neirong: '当我纯粹为了娱乐而阅读时，我偏好作者',
            xuanxiang: [
              '清楚明白地说明他想表达的内容',
              '用具有创意、有趣的方式说出某些事物'
            ]
          },
          {
            neirong: '当我看过课堂中的图表或草图之后，我比较有可能会记住',
            xuanxiang: [
              '这幅图',
              '教师的解释'
            ]
          },
          {
            neirong: '当考虑很多关联信息时，我可能会',
            xuanxiang: [
              '专注在细节上，而不太在意整体',
              '先尝试理解整体构架再了解细节'
            ]
          },
          {
            neirong: '我比较容易记得',
            xuanxiang: [
              '我曾经做过的事情',
              '我曾经深入思考过的事情'
            ]
          },
          {
            neirong: '当我必须去执行某件工作时，我偏好',
            xuanxiang: [
              '精通一种执行工作的方法',
              '想出更多新的执行工作的方法'
            ]
          },
          {
            neirong: '当别人给我看数据时，我所偏好的形式是',
            xuanxiang: [
              '表格和图片',
              '以文字总结的成果'
            ]
          },
          {
            neirong: '当我写作一篇文章时，比较倾向于',
            xuanxiang: [
              '从起始写到结尾，以直线方式思考或撰写',
              '思考或撰写各个不同的段落，再将这些段落统整为一篇文章'
            ]
          },
          {
            neirong: '当我必须以小组进行项目工作时，我首先想要',
            xuanxiang: [
              '先进行小组的群体脑力激荡，让每个组员贡献他们的意见',
              '让每个组员各自进行思考，再集合起来比较各种想法或意见'
            ]
          },
          {
            neirong: '我认为赞美某人以下何者，对某人有比较高的评价',
            xuanxiang: [
              '有判断力',
              '富有想象力'
            ]
          },
          {
            neirong: '在聚会中碰到很多人，我可能会记住得',
            xuanxiang: [
              '他们的长相',
              '他们介绍自己的话'
            ]
          },
          {
            neirong: '当我在学习一个新的主题时，我倾向于',
            xuanxiang: [
              '专注在这个主题，并尽可能地去学习它',
              '尝试寻找与该主题和其他相关主题的关联'
            ]
          },
          {
            neirong: '我比较有可能被认为是',
            xuanxiang: [
              '外向的人',
              '内向的人'
            ]
          },
          {
            neirong: '我较喜欢具有下列何种教材内容的课程',
            xuanxiang: [
              '具体的(事实、数据)',
              '抽象的(观念、理论)'
            ]
          },
          {
            neirong: '就娱乐而言，我较喜欢',
            xuanxiang: [
              '看电视',
              '看书'
            ]
          },
          {
            neirong: '某些老师会在课程的一开始就列出课程内容的大纲，我认为这些大纲',
            xuanxiang: [
              '对我有一点帮助',
              '对我非常有帮助'
            ]
          },
          {
            neirong: '对于分组做作业并且每个小组成员拿到同一分数的方式',
            xuanxiang: [
              '十分吸引我',
              '并不吸引我'
            ]
          },
          {
            neirong: '当在做一个冗长的计算时',
            xuanxiang: [
              '我会一再地重复所有步骤并仔细地检查',
              '我发觉检查的工作是非常累人的，我必须强迫自己去做'
            ]
          },
          {
            neirong: '我使用绘图方式描绘我去过的地方时',
            xuanxiang: [
              '轻易且正确无误',
              '有些困难而细节也不清楚'
            ]
          },
          {
            neirong: '当我在小组工作中解决问题时，我比较有可能会',
            xuanxiang: [
              '思考如何去解决问题的步骤',
              '从比较广的范围去思考可能的结果或应用'
            ]
          }
        ],
        index: 0
      }
    },
    created(){
      for ( var i = 0; i < 44; i++)
      {
        this.answer.push(-1)
      }
    }
    ,
    methods: {
  
      changehandle (value) {
        this.ans[this.index] = value
        console.log(this.ans[this.index])
      },
  
      async xiayiti () {
        if (this.radio !== -1)
        {
          this.answer[this.index]=this.radio
          this.radio = -1
          this.index++
          if (this.index < this.timus.length) this.mydata = this.timus[this.index]
        }
  
        var a=0;
        var b=0;
  
        if(this.index == this.timus.length)
        {
          for(var i=0 ; i < 11 ; i++)
          {
  
            if(this.answer[4*i+0] === 0)
            {
              a++;
            }
            else if(this.answer[4*i+0] === 1)
            {
              b++;
            }
          }
          if(a > b && a + b === 11)
          {
            this.style.push('活跃型')
          }
          else if(a < b && a + b === 11)
          {
            this.style.push('沉思型')
          }
  
          a=0;
          b=0;
  
          for(var i=0 ; i < 11 ; i++)
          {
  
            if(this.answer[4*i+1] === 0)
            {
              a++;
            }
            else if(this.answer[4*i+1] === 1)
            {
              b++;
            }
          }
          if(a > b && a + b === 11)
          {
            this.style.push('感悟型')
          }
          else if(a < b && a + b === 11)
          {
            this.style.push('直觉型')
          }
  
  
          a=0;
          b=0;
  
          for(var i=0 ; i < 11 ; i++)
          {
  
            if(this.answer[4*i+2] === 0)
            {
              a++;
            }
            else if(this.answer[4*i+2] === 1)
            {
              b++;
            }
          }
          if(a > b && a + b === 11)
          {
            this.style.push('视觉型')
          }
          else if(a < b && a + b === 11)
          {
            this.style.push('言语型')
          }
  
  
          a=0;
          b=0;
  
          for(var i=0 ; i < 11 ; i++)
          {
  
            if(this.answer[4*i+3] === 0)
            {
              a++;
            }
            else if(this.answer[4*i+3] === 1)
            {
              b++;
            }
          }
          if(a > b && a + b === 11)
          {
            this.style.push('序列型')
          }
          else if(a < b && a + b === 11)
          {
            this.style.push('综合型')
          }
  
  
          console.log(this.style)
          console.log(this.answer)
          if(this.style.length === 4 )
          {
            // console.log(this.style)
            // this.$axios.post('localhost:8080/test',this.style)
            const { data:res} = await this.$http.post('learnStyle', {style:this.style});
                console.log(res);
                // 状态码是200时成功，message弹框提示
                if (res.status !=200) 
                    return this.$message.error('提交失败！');
                this.$message.success('提交成功！');
                this.dialogFormVisible_style_tishi=true
          }
        }
      }
    }
  }
  </script>
  <style>
    .text {
      font-size: 14px;
    }
  
    .item {
      margin-bottom: 18px;
    }
  
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
  
    .box-card {
      width: 480px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

    .hello{
      height: 100%;
      width: 100%;
    }
  </style>
  